<script setup lang="ts">
import {
  Menu as IconMenu,
  Message,
  Setting,
  DArrowRight,
  DArrowLeft,
} from "@element-plus/icons-vue";
import { onBeforeUnmount, onMounted, onUpdated, ref } from "vue";
const rootHeight = ref("100%");
const menuHeight = ref("400px");
/**
 * 1、一级菜单，名称，超宽时，会导致出现滚动条
 * 2、二级菜单超宽时，则不会出现滚动条
 */
const menuList = ref([
  {
    name: "111111111111111111111111111",
    code: "1",
    child: [
      { childName: "1-1", childCode: "1-1" },
      { childName: "1-2", childCode: "1-2" },
      { childName: "1-3", childCode: "1-3" },
      { childName: "1-4", childCode: "1-4" },
      { childName: "1-5", childCode: "1-5" },
      { childName: "1-6", childCode: "1-6" },
      { childName: "1-7", childCode: "1-7" },
      { childName: "1-8", childCode: "1-8" },
      { childName: "1-9", childCode: "1-9" },
      {
        childName: "1-1111111111111111111111111111111111111111111111111111",
        childCode: "1-10",
      },
    ],
  },
  {
    name: "2",
    code: "2",
    child: [
      { childName: "2-1", childCode: "2-1" },
      { childName: "2-2", childCode: "2-2" },
      { childName: "2-3", childCode: "2-3" },
      { childName: "2-4", childCode: "2-4" },
      { childName: "2-5", childCode: "2-5" },
      { childName: "2-6", childCode: "2-6" },
      { childName: "2-7", childCode: "2-7" },
      { childName: "2-8", childCode: "2-8" },
      { childName: "2-9", childCode: "2-9" },
      { childName: "2-10", childCode: "2-10" },
    ],
  },
  {
    name: "3",
    code: "3",
    child: [
      { childName: "3-1", childCode: "3-1" },
      { childName: "3-2", childCode: "3-2" },
      { childName: "3-3", childCode: "3-3" },
      { childName: "3-4", childCode: "3-4" },
      { childName: "3-5", childCode: "3-5" },
      { childName: "3-6", childCode: "3-6" },
      { childName: "3-7", childCode: "3-7" },
      { childName: "3-8", childCode: "3-8" },
      { childName: "3-9", childCode: "3-9" },
      { childName: "3-10", childCode: "3-10" },
      { childName: "3-11", childCode: "3-11" },
      { childName: "3-12", childCode: "3-12" },
      { childName: "3-13", childCode: "3-13" },
      { childName: "3-14", childCode: "3-14" },
      { childName: "3-15", childCode: "3-15" },
      { childName: "3-16", childCode: "3-16" },
      { childName: "3-17", childCode: "3-17" },
      { childName: "3-18", childCode: "3-18" },
      { childName: "3-19", childCode: "3-19" },
    ],
  },
]);
//--------------------------------------------------------------------------------------
// 标记当前选中的数据位置
const currentMenuPosition = ref({
  parentCode: "",
  childCode: "",
});
//--------------------------------------------------------------------------------------
// 赋，初始值
function initSel() {
  if (menuList.value.length > 0) {
    currentMenuPosition.value.parentCode = menuList.value[0]?.code ?? "";
    if (menuList.value[0].child.length > 0) {
      currentMenuPosition.value.childCode =
        menuList.value[0].child[0]?.childCode ?? "";
    } else {
      currentMenuPosition.value.childCode = "";
    }
  } else {
    currentMenuPosition.value.parentCode = "";
    currentMenuPosition.value.childCode = "";
  }
  console.log(
    "<-initSel->" +
      currentMenuPosition.value.parentCode +
      "<-->" +
      currentMenuPosition.value.childCode +
      "<-->"
  );
}
//--------------------------------------------------------------------------------------
function parentClick(code: string) {
  for (var i = 0; i < menuList.value.length; i++) {
    if (code == menuList.value[i].code) {
      currentMenuPosition.value.parentCode = code;
      if (menuList.value[i].child.length > 0) {
        currentMenuPosition.value.childCode =
          menuList.value[i].child[0]?.childCode ?? "";
      }
    }
  }
  console.log(
    "<-parentClick->" +
      currentMenuPosition.value.parentCode +
      "<-->" +
      currentMenuPosition.value.childCode +
      "<-->"
  );
}
function childClick(code: string) {
  for (var i = 0; i < menuList.value.length; i++) {
    if (currentMenuPosition.value.parentCode == menuList.value[i].code) {
      for (var j = 0; j < menuList.value[i].child.length; j++) {
        if (menuList.value[i].child[j].childCode == code) {
          currentMenuPosition.value.childCode = code;
          break;
        }
      }
    }
  }
  console.log(
    "<-childClick->" +
      currentMenuPosition.value.parentCode +
      "<-->" +
      currentMenuPosition.value.childCode +
      "<-->"
  );
}
//--------------------------------------------------------------------------------------
function countComponentHeight() {
  let height = document.body.offsetHeight;
  if (height < 480) {
    height = 480;
  }
  rootHeight.value = height + "px";
  //------------------------------------------------
  // 处理，将折叠按钮，固定放在底部
  const menuHeightValue = height - 48;
  menuHeight.value = menuHeightValue + "px";
  //------------------------------------------------
  // 处理，当宽度小于指定值时，自动折叠
  // 【处理自动折叠自动展开动作】
  let width = document.body.offsetWidth;
  if (!isCollapse.value && width < 720) {
    isCollapse.value = true;
  } else if (isCollapse.value && width >= 720) {
    isCollapse.value = false;
  }
  // console.log(
  //   "宽度[resizeListener]----" +
  //     rootHeight.value +
  //     "<--->" +
  //     width +
  //     "<--->" +
  //     isCollapse.value +
  //     "<--->"
  // );
  console.log("宽度[resizeListener]----" + rootHeight.value + "<--->");
}
//--------------------------------------------------------------------------------------
onMounted(() => {
  countComponentHeight();
  window.addEventListener("resize", resizeListener);
  initSel();
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeListener);
});
onUpdated(() => {
  countComponentHeight();
  console.log("宽度[onUpdated]----" + rootHeight.value);
});
function resizeListener() {
  countComponentHeight();
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log("<-handleOpen->", key, JSON.stringify(keyPath));
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log("<-handleClose->", key, JSON.stringify(keyPath));
};
// -------------------------------------------------------------
function openOrClose() {
  isCollapse.value = !isCollapse.value;
  //----------------------------------------
  // 重新设置宽度
  // if (isCollapse.value) {
  //   // const menuComp = document.getElementById("menuContainer");
  //   // const compWidth = menuComp?.offsetWidth ?? 0;
  //   menuWidth.value = 80;
  // } else {
  //   menuWidth.value = 280;
  // }
  // console.log("<-->" + isCollapse.value + "<-->" + menuWidth.value + "<-->");

  const menuComp = document.getElementById("menuContainer");
  const compWidth = menuComp?.offsetWidth ?? 0;
  console.log("<-->" + isCollapse.value + "<-->" + compWidth + "<-->");
}
const isCollapse = ref(false);
const menuWidth = ref(180);
</script>
<template>
  <el-scrollbar class="style-root" :style="{ height: rootHeight }">
    <!-- ********* -->
    <!-- 菜单（选中）  unique-opened 指定，只展开一个子菜单
     :class="[isCollapse ? 'menu-collapsed' : 'menu-expanded']"
     -->
    <div class="style-menu-container">
      <!-- 
      background-color="#545c64" --指定一级菜单，背景色（这里不论折叠，展开）
      text-color="#ffffff" --指定文字颜色
      active-text-color="#ffd04b"
        

              text-color="#ffffff"
        background-color="#545c64"
      -->
      <el-menu
        class="el-menu-vertical-demo"
        unique-opened
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
        id="menuContainer"
      >
        <div v-for="(item, index) in menuList" :key="item.code">
          <el-sub-menu :index="item.code" popper-class="custom-popper">
            <template #title>
              <div style="max-width: 130px; align-items: center">
                <el-icon><document /></el-icon>
                <!-- 限制，一级菜单，文字宽度 -->
                <span
                  v-if="!isCollapse"
                  style="
                    max-width: 110px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: inline-block;
                  "
                  >{{ item.name }}</span
                >
              </div>
            </template>
            <div
              v-for="(itemSub, indexSub) in item.child"
              :key="itemSub.childCode"
            >
              <el-menu-item :index="itemSub.childCode">
                <!-- 限制二级菜单，文字宽度 -->
                <span
                  style="
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: inline-block;
                  "
                  >{{ itemSub.childName }}</span
                >
              </el-menu-item>
            </div>
          </el-sub-menu>
        </div>
      </el-menu>
      <!-- *********************************** -->
      <!-- 折叠按钮 -->
      <div class="style-collapse">
        <div v-if="isCollapse" @click="openOrClose()">
          <el-icon color="#333333" :size="24"><DArrowRight /></el-icon>
        </div>
        <div v-else @click="openOrClose()">
          <el-icon color="#333333" :size="24"><DArrowLeft /></el-icon>
        </div>
      </div>
    </div>
  </el-scrollbar>
  <!-- ********************************************************************** -->
</template>
<style scoped>
/* 根容器 scrollbar 【非菜单】 */
.style-root {
  width: 100%;
  height: 100%;
  min-height: 840px;
  max-height: 980px;
  background-color: antiquewhite;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
/* menu的容器（包含了menu和 底部 折叠/展开 按钮）【非菜单】 */
.style-menu-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: start;
}
/* ----------------------------------------------------------------------------------------- */
/* --------------------------         指定菜单，折叠，展开的宽度   【菜单】     */
/* 展开，一级菜单，宽度，背景色；聚焦时背景色 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  /* 一级菜单，宽度【展开】  */
  width: 200px;
  min-height: 400px;
  /* 一级菜单，背景色【展开】  */
  background-color: #545c64;
  /* 一级菜单，聚焦背景色【展开】，展开时，对于二级菜单也生效，对于折叠时不生效 */
  --el-menu-hover-bg-color: #2e7fb8;
  /* 一级菜单，文字颜色/箭头颜色【展开】 */
  --el-menu-text-color: #ffffff;
}
/* 折叠，一级菜单，宽度，背景色；聚焦时背景色 */
.el-menu--collapse {
  /* 一级菜单，宽度【折叠】  */
  width: 64px;
  min-height: 400px;
  /* 一级菜单，背景色【折叠】  */
  background-color: #545c64;
  /* 一级菜单，聚焦背景色【折叠】  */
  --el-menu-hover-bg-color: #2e7fb8;
  /* 一级菜单，文字颜色/箭头颜色【折叠】 */
  --el-menu-text-color: #ffffff;
}
/* 【折叠】，二级菜单，聚焦时，文字颜色，背景色 */
.el-menu .el-menu-item:hover {
  outline: 0;
  color: #ffffff;
  background: #2e7fb8;
}
/* 【折叠】，二级菜单，文字颜色，背景色 */
.el-menu-item {
  color: #ffffff;
  background-color: #545c64;
}
.custom-popper {
  max-height: 560px; /* 设置你需要的最大高度 */
  overflow-y: auto; /* 启用垂直滚动条，如果内容超出设置的最大高度 */
}
/*  */
.style-collapse-popper {
  display: flex;
  flex-direction: column;
  max-height: 480px;
  justify-content: start;
}
/* ----------------------------------------------------------------------------------------- */
/* --------------------------         菜单底部，折叠，展开，图标部分样式【非菜单】        */
/* 折叠图标部分样式 */
.style-collapse {
  width: auto;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: end;
  background-color: aquamarine;
  padding-right: 8px;
  align-items: center;
}
/* ----------------------------------------------------------------------------------------- */
/* --------------------------         指定菜单，折叠，展开的宽度   【菜单】     */
/* 一级菜单，箭头颜色【展开】 */
/* :deep(.el-sub-menu__icon-arrow) {
  color: #ffffff;
} */
/* 无效 */
/* .el-sub-menu .el-sub-menu__icon-arrow {
  color: #ffffff;
} */
/* 二级菜单，背景色，文字颜色（固定，未选中 或 未聚焦时）【确定有效果，二级菜单背景色，文字颜色】 
<el-menu
        active-text-color="#ffd04b" 
        
        background-color="#545c64" -- 这个会覆盖一级菜单的颜色，但不会影响二级菜单
        text-color="#ffffff" -- 这个会覆盖一级菜单的颜色，但不会影响二级菜单
*/
/* :deep(.el-menu-item) {
  color: #ffffff;
  background-color: #545c64;
} */
/* 指定一级菜单的背景色，固定 (不能带透明度,一级菜单，聚焦时的背景色)*/
/**
--el-menu-hover-bg-color: #00ff00cc; 聚焦时，菜单的颜色【关系到：一级菜单，二级菜单】
 */
/* :deep(.el-menu-vertical-demo) {
  --el-menu-hover-bg-color: #2e7fb8;
}
:deep(.el-menu--collapse:not(.el-sub-menu.is-active)) {
  color: #ffffff;
}
:deep(.el-menu--collapse:not(.el-sub-menu__title)) {
  color: #ffffff;
} */
/* *********************************************************************************************************** */
</style>
<style lang="css">
.el-popper .el-menu--popup {
  /* 移除 scoped，将弹出菜单样式放在全局作用域 */
  padding: 0 !important;
  /* max-height: 400px; */
  --el-popper-border-radius: 4px;
  border: 0px solid #ffffff00;
  border-radius: 4px;
}
</style>
